<template>
  <div class="nav">
    <!---------------- 菜单栏 ------------------>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <div
        style="
          line-height: 58px;
          padding: 0 20px 0 20px;
          font-weight: bold;
          color: #333;
          user-select: none;
        "
      >
        <el-icon color="#409EFC" size="18"><Promotion /></el-icon>
        光谷智慧交通系统
      </div>
      <el-sub-menu index="1">
        <template #title> 实时路况 </template>
        <el-menu-item index="1-1"><TrafficOpen /></el-menu-item>
        <el-menu-item index="1-2"><TrafficClose /></el-menu-item>
      </el-sub-menu>
      <el-menu-item index="NoticeShow">查看公告</el-menu-item>
      <el-menu-item v-if="user.role == 0" index="EventReport"
        >事件上报</el-menu-item
      >
      <el-menu-item v-if="user.role > 0" index="NoticeAdd"
        >发布公告</el-menu-item
      >
      <el-menu-item v-if="user.role > 0" index="EventCheck"
        >事件审核</el-menu-item
      >
      <el-menu-item v-if="user.role > 0" index="EventManage"
        >事件管理</el-menu-item
      >
      <el-menu-item v-if="user.role > 0" index="EventStatistics"
        >事件统计</el-menu-item
      >
      <el-sub-menu v-if="user.role > 0" index="4">
        <template #title> 事故多发地 </template>
        <el-menu-item index="4-1"><ThermodyOpen /></el-menu-item>
        <el-menu-item index="4-2"><ThermodyClose /></el-menu-item>
      </el-sub-menu>
      <el-sub-menu v-if="user.role > 0" index="5">
        <template #title> 视频监控 </template>
        <el-menu-item index="MonitorOpen">打开监控</el-menu-item>
        <el-menu-item index="MonitorClose">关闭监控</el-menu-item>
      </el-sub-menu>
      <el-menu-item v-if="user.role > 1" index="UserManage"
        >用户管理</el-menu-item
      >
      <div class="flex-grow" />
      <div class="search">
        <!-- 搜索框 -->
        <el-input
          v-model="input"
          size="large"
          placeholder="输入内容搜索事件"
          @keydown.enter="handleSearch"
        >
          <template #prepend>
            <!-- 选择框 -->
            <el-select v-model="select" size="large" style="width: 110px">
              <el-option label="事件编号" value="event_number" />
              <el-option label="事件类型" value="event_type" />
              <el-option label="事件级别" value="event_level" />
            </el-select>
          </template>
          <template #append
            ><el-button :icon="'Search'" @click="handleSearch"
          /></template>
        </el-input>
      </div>
      <el-sub-menu index="9">
        <template #title>
          <el-icon :size="20">
            <User />
          </el-icon>
          {{ user.name }}
        </template>
        <el-menu-item index="UserUpdate">修改信息</el-menu-item>
        <el-menu-item index="UserLogout" @click="logout">登出</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
  <!-- 实时路况图示 -->
  <div class="road-tip" v-show="trafficTip">
    <ul>
      <li>
        畅通
        <div class="item1"></div>
      </li>
      <li>
        拥挤
        <div class="item2"></div>
      </li>
      <li>
        堵塞
        <div class="item3"></div>
      </li>
    </ul>
  </div>
</template>

<script setup>
/* 事件搜索输入框组件 (临时方法) */
// import EventInput from '@/' // 事件搜索输入框
/* 操作地图的组件 (临时方法) */
import TrafficClose from './components/map/traffic/trafficClose.vue' // 路况关闭
import TrafficOpen from './components/map/traffic/trafficOpen.vue' // 路况打开
import ThermodyClose from './components/map/thermody/thermodyClose.vue' // 多发地热力图关闭
import ThermodyOpen from './components/map/thermody/thermodyOpen.vue' // 多发地热力图打开
import { ref, onMounted, nextTick } from 'vue'
import { ElNotification } from 'element-plus' //导入通知框组件
import eventApi from '@/apis/event.js' //导入封装好的API
import { useDialogsStore } from '@/stores/dialogs' // 使用pinia
import { useUserStore } from '@/stores/user.js' // 使用pinia
import { useSearchStore } from '@/stores/search.js' // 使用pinia
import { ElMessage } from 'element-plus'
import userApi from '@/apis/user.js'
import router from '@/router'
import useMonitor from './hooks/useMonitor' // 目录树 hook
import useBuffer from './hooks/useBuffer' // 目录树 hook

const { monitorHighlight, monitorRemove } = useMonitor() // 目录树 hook
const { getBuffer } = useBuffer() // 目录树 hook
const { dialogs } = useDialogsStore()
const { user } = useUserStore()
const { search } = useSearchStore()
const id = localStorage.getItem('userId')
/*
  分析:
    用户类型 (在localstorage里, 从nav组件生命周期里读)
    对话框组件:
        查看公告, 报告事件, 发布公告, 事件审核, 事件管理, 用户管理, 工具箱-导出图片, 输入框, 改密, 登出
    操作地图:
        实时路况*2, 事故多发地*2, 视频监控*2, 工具箱-测量距离, 工具箱-测量面积
          方案1: 同于对话框组件
          方案2: 父组件点击事件 + hook
*/
const activeIndex = ref('1') // 当前激活的菜单项
const trafficTip = ref(false)
// 搜索框的输入,和选择
const input = ref('')
const select = ref('event_number')

// 点击查询
const handleSearch = () => {
  console.log(input.value, select.value)
  search.input = input.value
  search.select = select.value
  dialogs.event.search = true
}
/* 挂载 */
onMounted(() => {
  // 执行待处理事件消息提示
  messageTip()
  // console.log(localStorage.getItem('token'))
  // console.log(localStorage.getItem('userId'))
  const token = localStorage.getItem('token')

  const id = localStorage.getItem('userId')
  userApi.getById(id).then((res) => {
    // console.log(res.result[0])
    console.log(res, '5555')
    // console.log(res.result[0].user_name)
    user.name = res.result[0].user_name
    user.role = res.result[0].user_type
    // user.status = res.result[0].user_status + 1
    // const params = {
    //   user_name: res.result[0].user_name,
    //   user_password: res.result[0].user_password,
    //   user_type: res.result[0].user_type,
    //   user_status: res.result[0].user_status + 1,
    //   user_truname: res.result[0].user_truname,
    //   user_phone: res.result[0].user_phone,
    // }
    // userApi
    //   .edit(id, params)
    //   .then((res) => {
    //     console.log(res)
    //     if (res.code == '0') {
    //     }
    //   })
    //   .catch((err) => {
    //     console.log(err)
    //   })
  })
})
/*------------- 点击导航 ----------------*/
const handleSelect = (key, keyPath) => {
  switch (key) {
    case 'EventReport': // 事件上报
      dialogs.event.report = true
      break
    case 'EventCheck': // 事件审核
      dialogs.event.check = true
      break
    case 'EventManage': // 事件管理
      dialogs.event.manage = true
      break
    case 'EventStatistics': // 事件统计
      dialogs.event.statistics = true
      break
    case 'MonitorOpen': // 打开视频监控
      monitorHighlight()
      break
    case 'MonitorClose': // 关闭视频监控
      monitorRemove()
      break
    case 'NoticeShow': // 公告查看
      dialogs.notice.show = true
      break
    case 'NoticeAdd': // 公告发布
      getBuffer()
      // dialogs.notice.add = true
      break
    case 'UserManage': // 改密
      dialogs.user.manage = true
      break
    case 'UserUpdate': // 改密
      dialogs.user.update = true
      break
    case '1-1': // 实时路况图示显示
      trafficTip.value = true
      break
    case '1-2': // 实时路况图示关闭
      trafficTip.value = false
      break
  }
}
/* 登出 */
function logout() {
  localStorage.removeItem('token')

  router.push('/login')
  userApi.getById(id).then((res) => {
    console.log(res)
    // res.result[0].user_status = 0
  })
  ElMessage({
    message: '登出',
    type: 'success'
  })
}

function messageTip() {
  let interval
  setTimeout(() => {
    if (user.role != 0) {
      // 当前处于非普通用户权限下
      let total = 0
      interval = setInterval(async () => {
        const res = await eventApi.getEventAllUnchecked(1, 5)
        if (res.result.total - total > 0) {
          ElNotification({
            title: '注意!',
            message: '新的待审核的交通事件数:' + res.result.total,
            type: 'warning',
            position: 'bottom-left',
            offset: 100,
            duration: 3000,
            onClick: () => {
              dialogs.event.check = true
            }
          })
          total = res.result.total
        } else {
          clearInterval(interval)
        }
      }, 1000)
    } else {
      clearInterval(interval)
    }
  }, 500)
}
</script>

<style scoped>
.nav {
  height: 58px;
}
.flex-grow {
  flex-grow: 1;
}
.search {
  margin-top: 10px;
  margin-right: 30px;
}
.road-tip {
  position: fixed;
  top: 200px;
  left: 200px;
  z-index: 999;
}
.road-tip li div {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: rgba(0, 245, 0, 0.8);
}
.road-tip li .item2 {
  background-color: rgba(245, 100, 3, 0.8);
}
.road-tip li .item3 {
  background-color: rgba(255, 0, 0, 0.8);
}
</style>
